<template>
  <div class="user-profile">
    <!-- 头部-->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <input type="file" hidden ref="file" @change="onFileChange" />
    <!-- 个人信息 -->
    <van-cell title="头像" is-link>
      <van-image
        class="avatar"
        :src="user.photo"
        round
        fit="cover"
        @click="$refs.file.click()"
      />
    </van-cell>
    <van-cell
      title="昵称"
      :value="user.name"
      is-link
      @click="isUpdatedNameShow = true"
    />
    <van-cell
      title="性别"
      :value="user.gender === 0 ? '男' : '女'"
      is-link
      @click="isUpdatedGenderShow = true"
    />
    <van-cell
      title="生日"
      :value="user.birthday"
      is-link
      @click="isUpdatedBirthdayShow = true"
    />

    <!-- 编辑昵称的弹出层 -->
    <van-popup
      v-model="isUpdatedNameShow"
      position="bottom"
      style="height: 100%"
    >
      <!-- 编辑昵称弹出的内容 -->
      <updateName
        v-if="isUpdatedNameShow"
        @close="isUpdatedNameShow = false"
        v-model="user.name"
      >
      </updateName>
    </van-popup>
    <!-- 编辑昵称的弹出层 -->
    <!-- 编辑性别的弹出层 -->
    <van-popup v-model="isUpdatedGenderShow" position="bottom">
      <updateGender
        v-if="isUpdatedGenderShow"
        @close="isUpdatedGenderShow = false"
        v-model="user.gender"
      >
      </updateGender>
    </van-popup>
    <!-- 编辑性别的弹出层 -->
    <!-- 编辑生日的弹出层 -->
    <van-popup v-model="isUpdatedBirthdayShow" position="bottom">
      <update-birthday
        v-if="isUpdatedBirthdayShow"
        @close="isUpdatedBirthdayShow = false"
        v-model="user.birthday" 
      >
    
      </update-birthday>
    </van-popup>
    <!-- 编辑生日的弹出层 -->

    <!-- 编辑头像的弹出层 -->
    <van-popup v-model=" isUpdatedPhotoShow" 
    style="height:100%"
    position="bottom">
      <updatePhoto
      v-if="isUpdatedPhotoShow"
      :img="img"
       @close="isUpdatedPhotoShow = false"
       @update-photo="user.photo=$event"
      ></updatePhoto>
    </van-popup>
    <!-- 编辑头像的弹出层 -->
  </div>
</template>

<script>
import { getUserProfile } from "@/api/user";
import updateName from "@/views/user-profile/components/updateName.vue";
import updateGender from "@/views/user-profile/components/usdateGender.vue";
import updateBirthday from "@/views/user-profile/components/updateBirthday.vue";
import updatePhoto from "@/views/user-profile/components/updatePhoto.vue";
export default {
  components: {
    updateName,
    updateGender,
    updateBirthday,
    updatePhoto,
  },
 
  data() {
    return {
      user: {}, //个人信息
      isUpdatedNameShow: false,
      isUpdatedGenderShow: false,
      isUpdatedBirthdayShow: false,
      isUpdatedPhotoShow: false,
      img:null
    };
  },
  created() {
    this.loadUserProfile();
  },
  methods: {
 
    async loadUserProfile() {
      try {
        const { data } = await getUserProfile();
        this.user = data.data;
      } catch (err) {
        console.log(err);
      }
    },
    onFileChange() {
      // 获取文件对象
      const file = this.$refs.file.files[0];
      // 基于文章对象获取blob数据
      this.img = window.URL.createObjectURL(file);
      console.log(this.img);
      
    //   显示编辑头像的弹出框
    this.isUpdatedPhotoShow=true
    // file-input如果选择了同一个文件不会触发change事件，解决办法就是每次使用完毕以后，把他的value清空
    this.$refs.file.value=''
    },
  },
};
</script>

<style scoped lang="less">
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
}
</style>
